---
title: 개발 및 빌드
description: '새로운 프로젝트를 시작하는 방법'
i18nReady: true
---
import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro 프로젝트가 준비되었다면, 이제 Astro를 사용하여 빌드할 준비가 된 것입니다! 🚀

## 프로젝트 편집

프로젝트를 변경하려면 코드 편집기에서 프로젝트 폴더를 여세요. 개발 서버를 실행하는 개발 모드에서 작업하면 코드를 편집할 때 사이트 업데이트를 확인할 수 있습니다.

TypeScript를 구성하거나 공식 Astro 편집기 확장 프로그램을 설치하는 등 [개발 환경의 측면을 사용자 정의](#개발-환경-구성)할 수도 있습니다.

### Astro 개발 서버 시작

Astro에는 프로젝트 개발에 필요한 모든 기능을 갖춘 내장 개발 서버가 함께 제공됩니다. `astro dev` CLI 명령은 로컬 개발 서버를 시작하여 처음으로 새로운 웹사이트가 작동하는 모습을 볼 수 있도록 합니다.

모든 스타터 템플릿에는 `astro dev`를 실행하는 사전 구성된 스크립트가 함께 제공됩니다. 프로젝트 디렉터리로 이동한 후 원하는 패키지 관리자를 사용하여 이 명령을 실행하고 Astro 개발 서버를 시작하세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>

모든 것이 잘 진행되면 Astro는 이제 [http://localhost:4321/](http://localhost:4321/)에서 프로젝트를 제공합니다. 브라우저에서 해당 링크를 방문하여 새 사이트를 확인하세요!

### 개발 모드에서 작업

Astro는 `src/` 디렉터리의 파일 변경을 실시간으로 수신하고, 빌드하는 동안 사이트 미리보기를 업데이트하므로 개발 중 변경 사항이 발생할 때 서버를 다시 시작할 필요가 없습니다. 개발 서버가 실행 중일 때 브라우저에서 항상 최신 버전의 사이트를 볼 수 있습니다.

브라우저에서 사이트를 볼 때 [Astro 개발 도구 모음](/ko/guides/dev-toolbar/)에 접근할 수 있습니다. 빌드하는 동안 [아일랜드](/ko/concepts/islands/)를 검사하고 접근성 문제를 발견하는 등 다양한 작업을 수행하는 데 도움이 됩니다.

개발 서버를 시작한 후 브라우저에서 프로젝트를 열 수 없는 경우, `dev` 명령을 실행한 터미널로 돌아가서 표시된 메시지를 확인하세요. 오류가 발생했는지 또는 프로젝트가 [http://localhost:4321/](http://localhost:4321/) 이외의 다른 URL에서 제공되는지 알려줍니다.

## 사이트 빌드 및 미리보기

빌드 시 생성될 사이트 버전을 확인하려면 개발 서버를 종료하고 (<kbd>Ctrl</kbd> + <kbd>C</kbd>) 터미널에서 패키지 관리자에 적합한 빌드 명령을 실행하세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run build
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm build
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run build
  ```
  </Fragment>
</PackageManagerTabs>

Astro는 배포 준비된 버전의 사이트를 별도의 폴더 (`dist/`가 기본값)에 빌드하며 터미널에서 진행 상황을 확인할 수 있습니다. 이렇게 하면 프로덕션에 배포하기 전에 프로젝트의 빌드 오류를 알 수 있습니다. TypeScript가 `strict` 또는 `strictest`로 구성된 경우 `build` 스크립트는 프로젝트의 타입 오류도 확인합니다.

빌드가 완료되면 터미널에서 적절한 `preview` 명령 (예: `npm run preview`)을 실행하여 동일한 브라우저 미리보기 창에서 로컬로 빌드된 버전의 사이트를 볼 수 있습니다.

빌드 명령이 마지막으로 실행되었을 때의 코드 상태를 미리 보여줍니다. 이는 웹에 배포되었을 때 사이트가 어떻게 보이는지 미리 보여주기 위한 것입니다. 빌드 후 코드의 변경 사항은 빌드 명령을 다시 실행할 때까지 사이트를 미리 보는 동안 반영되지 **않습니다**.

(<kbd>Ctrl</kbd> + <kbd>C</kbd>)를 사용하여 미리보기를 종료하고 다른 터미널 명령을 실행하세요. 예를 들어, 편집할 때마다 업데이트되어 코드 변경 사항의 실시간 미리보기를 보여주는 [개발 모드](#개발-모드에서-작업)로 돌아가려면 개발 서버를 다시 시작하세요.

<ReadMore>Astro를 사용하여 빌드할 때 사용할 [Astro CLI](/ko/reference/cli-reference/) 및 터미널 명령에 대해 자세히 알아보세요.</ReadMore>

:::tip
코드를 너무 많이 추가하거나 변경하기 전에 [새로운 사이트를 바로 배포](/ko/guides/deploy/)하는 것이 좋을 수 있습니다. 이렇게 하면 최소한의 작동 버전의 사이트를 게시하는 데 도움이 되며 나중에 배포 문제를 해결하는 데 추가 시간과 노력을 절약할 수 있습니다.
:::

## 다음 단계

성공! 이제 Astro로 빌드를 시작할 준비가 되었습니다! 🥳

다음은 다음에 탐색해 보는 것을 추천하는 몇 가지 사항입니다. 어떤 순서로든 읽을 수 있습니다. 잠시 문서를 떠나 새로운 Astro 프로젝트 코드베이스에서 자유롭게 작업하다가 문제가 발생하거나 질문이 생길 때 언제든지 다시 돌아올 수도 있습니다.

### 개발 환경 구성

개발 환경을 사용자 정의하려면 아래 가이드를 살펴보세요.

<CardGrid>
  <LinkCard
    title="편집기 설정"
    description="Astro 개발자 경험을 향상시키고 새로운 기능을 잠금 해제하도록 코드 편집기를 사용자 정의하세요."
    href="/ko/editor-setup/"
  />
  <LinkCard
    title="개발 도구 모음"
    description="개발 도구 모음의 유용한 기능을 살펴보세요."
    href="/ko/guides/dev-toolbar/"
  />
  <LinkCard
    title="TypeScript 구성"
    description="타입 검사, IntelliSense 등의 옵션을 구성하세요."
    href="/ko/guides/typescript/"
  />
</CardGrid>

### Astro 기능 살펴보기

<CardGrid>
  <LinkCard
    title="코드베이스 이해"
    description="프로젝트 구조 가이드에서 Astro의 파일 구조에 대해 알아보세요."
    href="/ko/basics/project-structure/"
  />
  <LinkCard
    title="콘텐츠 컬렉션 생성"
    description="프런트매터 유효성 검사 및 자동 타입 안전을 통해 새 사이트에 콘텐츠를 추가하세요."
    href="/ko/guides/content-collections/"
  />
  <LinkCard
    title="뷰 전환 추가"
    description="매끄러운 페이지 전환 및 애니메이션을 만드세요."
    href="/ko/guides/view-transitions/"
  />
  <LinkCard
    title="아일랜드에 대해 알아보기"
    description="Astro의 아일랜드 아키텍처에 대해 알아보세요."
    href="/ko/concepts/islands/"
  />
</CardGrid>

### 입문 튜토리얼

[입문 튜토리얼](/ko/tutorial/0-introduction/)에서 빈 페이지 하나부터 시작하여 완전한 기능을 갖춘 Astro 블로그를 만들어 보세요.

이 튜토리얼은 Astro가 어떻게 작동하는지 보여주는 좋은 방법이며 페이지, 레이아웃, 컴포넌트, 라우팅, 아일랜드 등의 기본 사항을 안내합니다. 또한 웹 개발 개념에 익숙하지 않은 사람들을 위한 초보자 친화적인 선택적 유닛도 포함되어 있으며, 컴퓨터에 필요한 애플리케이션 설치, GitHub 계정 생성 및 사이트 배포 과정을 안내합니다.
